import React, { useRef, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Upload from './components/upload'
import { Upload as AndtUpload } from 'antd'
import { UploadChangeParam, UploadFile } from 'antd/es/upload';
function App() {
  const [url, setUrl] = useState('')
  // 上传前校验函数
  const beforeUpload = (file: File) => {
    const { type, size } = file
    // 检测是不是图片  => type 包含 image

    if (!type.includes('image')) {
      return alert('上传的文件只可以是图片类型');
    }
    // 上传的图片大小  不超过2MB 
    if (size > 2 * 1024 * 1024) {
      return alert('图片的大小不可以超过2MB')
    }

    return true
  }
  const uploadResult = (data: any) => {
    const { code, data: { message, url } } = data
    setUrl(url)
  }
  const handleChange = (info: UploadChangeParam<UploadFile<any>>) => {
    console.log(info)
  }
  return (
    <div className="App">
      <Upload beforeUpload={beforeUpload} action="/api/upload" uploadResult={uploadResult}>
        <div className='upload-box'>
          <h2>自定义组件 拖拽此处上传</h2>
          <button className='upload-btn'>上传图片</button>
        </div>
      </Upload>
      <AndtUpload beforeUpload={beforeUpload} action="/api/upload" name='chunk' onChange={ handleChange}>
        <div className='upload-box' style={{ width: '100vw' }}>
          <h2>antd拖拽此处上传</h2>
          <button className='upload-btn'>上传图片</button>
        </div>
      </AndtUpload>
      <img src={url} alt="" />
      <img src="https://2007a-1.oss-cn-shanghai.aliyuncs.com/1.jpg" alt="" />
    </div>
  );
}

export default App;
